/*
 * Copyright (C) 2015 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

@mixin mode-visibility($edit, $disp, $igno) {
  .editing {
    display: $edit;
  }
  .displaying {
    display: $disp;
  }
  .ignoring {
    display: $igno;
  }
}

// unfortunately, we used the same class name as bootstrap's .container, need to reset it's effects
@mixin revert_bootstrap_container {
  margin-left: 0;
  margin-right: 0;
  width: auto;
}

.rubric_container {
  margin-top: 20px;
  tr.criterion .links {
    float: right;
    text-align: right;
  }
  .small_description {
    font-style: italic;
    margin-top: .5rem;
  }

  &.editing {
    tr.criterion .links {
      display: inline-block;
    }
    tr.criterion .description {
      clear: both;
    }
    label[for=rubric-title] {
      font-weight: bold;
    }
    tr.criterion .container .add_rating_link {
      position: absolute;
      float: right;
      top: 50%;
      right: -.5%;
      transform: translateY(-50%);
      line-height: 0;
      width: 0;
      display: block;
    }
    .add_rating_link_after {
      border-radius: 1rem;
      background-color: $ic-link-color;
      text-align: center;
      vertical-align: middle;
      display: table-cell;
    }
    .add_rating_link i::before {
      font-size: .75rem;
      padding: .1875rem;
    }
    .add_rating_link i {
      color: $ic-color-light;
    }
    tr.criterion td.criterion_description .description_content {
      float: left;
      clear: both;
    }
  }
  .rubric_table {
    border-collapse: collapse;
    //for some reason, chrome puts a scrollbar on the table in the extended gradebook if it is 100%
    width: 99.9%;
    height: 100%;
    page-break-inside: avoid;

    .find_outcome_link {
      margin-left: 10px;
    }
  }
  thead th {
    background-color: $ic-color-medium-light;
  }
  td, th {
    border: 1px solid $ic-border-color;
    padding: 7px 10px;
  }
  .rubric_title {
    background-color: $ic-color-medium-light;
    border-top: 1px solid $ic-border-color;
    border-left: 1px solid $ic-border-color;
    border-right: 1px solid $ic-border-color;
    padding: 5px;
    font-weight: bold;
  }
  .has-assessments-warning {
    font-size: 0.8em;
    font-weight: normal;
  }
  tr.criterion td.criterion_description {
    height: 100%;
    vertical-align: top;
    .container {
      @include revert_bootstrap_container;
      position: relative;
      font-size: 0.9em;
      display: table;
      width: 100%;
    }
    .description_content {
      display: table-cell;
      vertical-align: middle;
    }
    .learning_outcome_flag, .threshold {
      display: none;
    }
    .long_description_holder {
      font-size: 0.8em;
      display: block;
      &.empty {
        display: none;
      }
    }
    .assessment-comments {
      @include fontSize(10px);
      h6, .h6 {
        margin-top: 10px;
      }
    }
  }
  tr.criterion.learning_outcome_criterion {
    td.criterion_description {
      .learning_outcome_flag {
        display: inline;
      }
      .threshold {
        font-size: 0.8em;
        display: block;
        white-space: nowrap;
      }
      &.points_form {
        @include mode-visibility($edit: none, $disp: block, $igno: none);
      }
    }
  }
  tr.criterion.learning_outcome_criterion.ignore_criterion_for_scoring {
    .points_form {
      @include mode-visibility($edit: none, $disp: none, $igno: block);
    }
  }
  table.ratings {
    border-collapse: collapse;
    width: 100%;
    height: 100%;
    margin-left: -1px;
    td {
      border: 1px solid #aaa;
      padding: 2px 5px;
      border-bottom-width: 0;
      border-right-width: 0;
      border-top-width: 0;
      font-size: 0.8em;
      vertical-align: top;
      padding: 2px 10px;
      .container {
        @include revert_bootstrap_container;
        padding: 5px 0;
        position: relative;
        height: 100%;
      }
      &.edge_rating .delete_rating_link {
        display: none;
      }
      &:last-child .add_rating_link_after {
        display: none;
      }
      &.infinitesimal .range_rating {
        display: none;
      }
    }
  }
  @include mode-visibility($edit: none, $disp: block, $igno: none);
  .assessing {
    display: none;
  }
  td.criterion_description.completed {
    background-color: #ddd;
  }
  td.rating.selected {
    background-color: #cfa;
  }
  td.points_form {
    .criterion_comments {
      display: none;
    }
    .displaying {
      .criterion_comments {
        display: inline;
        &.empty {
          display: none;
        }
      }
    }
  }
  &.assessing {
    .points_form {
      @include mode-visibility($edit: block, $disp: none, $igno: none);
      .criterion_comments {
        display: inline;
        &.empty {
          opacity: 0.7;
          &:hover {
            opacity: 0.9;
          }
        }
      }
    }
    span.assessing {
      display: inline;
    }
    div.assessing {
      display: block;
    }
    div.not_assessing {
      display: none;
    }
    td.rating:hover {
      background-color: #ad9;
      cursor: pointer;
    }
    tr.criterion.learning_outcome_criterion {
      td.points_form {
        @include mode-visibility($edit: block, $disp: none, $igno: none);
      }
    }
    tr.criterion.learning_outcome_criterion.ignore_criterion_for_scoring {
      td.points_form {
        @include mode-visibility($edit: none, $disp: none, $igno: block);
      }
    }
  }
  &.editing {
    @include mode-visibility($edit: block, $disp: none, $igno: none);
    td.editing, th.editing {
      display: table-cell;
    }
    table.ratings td {
      border-left: 1px dashed $ic-border-dark;
      border-right: 1px dashed $ic-border-dark;
    }
    table.ratings td:nth-of-type(1) {
      border-left: 0;
    }
    table.ratings td:nth-last-of-type(1) {
      border-right: 0;
    }
    tr.criterion td.criterion_description {
      .container {
        height: 100%;
      }
      .long_description_holder {
        font-size: 0.8em;
        font-weight: bold;
        &.empty {
          font-weight: normal;
          display: block;
        }
      }
    }
    tr.criterion.learning_outcome_criterion {
      td.points_form {
        @include mode-visibility($edit: none, $disp: block, $igno: none);
      }
    }
    table.ratings {
      td.add_right {
        border-right-color: #000;
        background: url(/images/add_right.png) no-repeat center right;
      }
      td.add_left {
        border-left-color: #000;
        background: url(/images/add_left.png) no-repeat center left;
      }
      td.add_column {
        cursor: pointer;
      }
    }
  }
  .has-assessments-warning {
    font-size: 0.8em;
    font-weight: normal;
    text-align: left;
  }
}

.rubric_summary {
  margin-top: 0 !important;
  .rating_holder {
    margin-bottom: 3px;
  }
  .rating {
    color: #777;
    font-style: italic;
    text-align: left;
  }
  .rating_comments_dialog_link {
    font-size: 0.8em;
    max-height: 2.7em;
    cursor: pointer;
    overflow: hidden;
  }
  .x_out_of_x {
    float: right;
  }
  &.free_form {
    .rating.description {
      display: none;
    }
  }
  .points_form {
    .rating_custom {
      height: 15px;
    }
  }
}

.edit-rubric-form .button-container {
  margin: 8px 0;
  text-align: right;
}

#rubric_holder {
  .rubric_title {
    margin-right: 0;
  }
  .hide_rubric_link {
    color: #333;
    cursor: pointer;
  }
}

.ic-Action-header--half-margin {
  margin-top: $ic-sp/2;
  margin-bottom: $ic-sp/2;
}

#edit_rating_form div{
  margin-top: 30px;
  width: 100%;
}
.rating_form_label {
  font-size: 1rem;
}
.popover_menu_width {
  max-width: 15em;
}
